import React from 'react';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Button,
} from '@mui/material';
import { API_PATHS, apiRequest } from '../../config/api';

interface Movie {
  _id: string;
  title: string;
  description: string;
  totalTickets: number;
  remainingTickets: number;
  price: number;
  showtime: string;
  orderCount?: number;
}

interface MovieListProps {
  movies: Movie[];
  onEdit: (movie: Movie) => void;
  onDelete: (movieId: string) => void;
  onViewOrders: (movie: Movie) => void;
}

const MovieList: React.FC<MovieListProps> = ({
  movies,
  onEdit,
  onDelete,
  onViewOrders,
}) => {
  return (
    <TableContainer sx={{
      background: 'rgba(255, 255, 255, 0.05)',
      borderRadius: '8px',
      '& .MuiTableCell-root': {
        color: 'white',
        borderColor: 'rgba(255, 255, 255, 0.1)',
      },
      '& .MuiTableRow-root:hover': {
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
      },
    }}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>电影名称</TableCell>
            <TableCell>描述</TableCell>
            <TableCell align="right">总票数</TableCell>
            <TableCell align="right">剩余票数</TableCell>
            <TableCell align="right">票价</TableCell>
            <TableCell align="right">订单数</TableCell>
            <TableCell>放映时间</TableCell>
            <TableCell>操作</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {movies.map((movie) => (
            <TableRow key={movie._id}>
              <TableCell>{movie.title}</TableCell>
              <TableCell>{movie.description}</TableCell>
              <TableCell align="right">{movie.totalTickets}</TableCell>
              <TableCell align="right">{movie.remainingTickets}</TableCell>
              <TableCell align="right">{movie.price}</TableCell>
              <TableCell align="right">{movie.orderCount || 0}</TableCell>
              <TableCell>{new Date(movie.showtime).toLocaleString()}</TableCell>
              <TableCell>
                <Button
                  variant="outlined"
                  size="small"
                  onClick={() => onEdit(movie)}
                  sx={{
                    mr: 1,
                    color: '#64b5f6',
                    borderColor: '#64b5f6',
                    '&:hover': {
                      borderColor: '#1976d2',
                      backgroundColor: 'rgba(25, 118, 210, 0.08)',
                    },
                  }}
                >
                  编辑
                </Button>
                <Button
                  variant="outlined"
                  size="small"
                  onClick={() => onViewOrders(movie)}
                  sx={{
                    mr: 1,
                    color: '#4caf50',
                    borderColor: '#4caf50',
                    '&:hover': {
                      borderColor: '#2e7d32',
                      backgroundColor: 'rgba(46, 125, 50, 0.08)',
                    },
                  }}
                >
                  查看订单
                </Button>
                <Button
                  variant="outlined"
                  color="error"
                  size="small"
                  onClick={() => onDelete(movie._id)}
                  sx={{
                    color: '#f44336',
                    borderColor: '#f44336',
                    '&:hover': {
                      borderColor: '#d32f2f',
                      backgroundColor: 'rgba(211, 47, 47, 0.08)',
                    },
                  }}
                >
                  删除
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default MovieList;